body{
    margin: 0 ;
    display: flex;
 
}#all1{
    width:1000px;
    height:800px;
    left: calc(50% - 1000px/2);
    background-image: url(meitu.jpg);
    background-size:1000px 800px;
     position: absolute;
}
#all{
    width:1000px;
    height:800px;
    left: calc(50% - 1000px/2);
    /*background-image: url(meitu.jpg);
    background-size:1000px 800px;*/
    transform-style: preserve-3d;
    position: absolute;
   
    animation: dongqilai 4s linear infinite;
   ani
}
@-moz-keyframes dongqilai{
    from{transform: rotate3d(1,1,0,0deg)}
    to{transform:rotate3d(1,1,0,360deg)}

}
#all>div{
    width: 300px;
    height:300px;
    position: absolute;
    left: calc(50% - 300px/2);
    bottom:calc(50% - 300px/2);
    /*perspective: 2000px;*/
    /*perspective-origin:100% -150%;*/
    }
#one{
    background-color:darkred ;
    transform: translateX(-150px) rotatey(90deg);
    opacity: 0.5;
}
#two{
    background-color:orange ;
    transform: translateX(150px) rotatey(-90deg);
    opacity: 0.5;
}
#three{
    background-color:yellow ;
    transform: translatey(150px) rotatex(-90deg);
    opacity: 0.5;
}
#four{
    background-color:green ;
    transform: translatey(-150px) rotatex(90deg);
    opacity: 0.5;
}
#five{
    background-color:blue ;
    transform: translateZ(-150px);
    opacity: 0.5;
}
#six{
    background-color:darkcyan ;
  transform: translateZ(150px);
  opacity: 0.5;
}
#all2{ width:1000px;
    height:800px;
    position: absolute;
    left: calc(50% - 1000px/2);
    /*background-image: url(meitu.jpg);
    background-size:1000px 800px;*/
    transform-style: preserve-3d;
    animation: dongqilai1 4s linear infinite;

}
@-moz-keyframes dongqilai1{
    from{transform: rotate3d(0,1,1,360deg)}
    to{transform:rotate3d(0,1,1,0deg)}}
#one1{
     background-image: url(img/1.JPG);
    transform: translateX(-75px) rotatey(90deg);
    opacity: 0.5;
}
#two1{
     background-image: url(img/2.JPG);
    transform: translateX(75px) rotatey(-90deg);
    opacity: 0.5;
}
#three1{
   background-image: url(img/3.JPG);
    transform: translatey(75px) rotatex(-90deg);
    opacity: 0.5;
}
#four1{
     background-image: url(img/4.JPG);
    transform: translatey(-75px) rotatex(90deg);
    opacity: 0.5;
}
#five1{
     background-image: url(img/5.JPG);
    transform: translateZ(-75px);
    opacity: 0.5;
}
#six1{
    background-image: url(img/6.JPG);
  transform: translateZ(75px);
  opacity: 0.5;
}
#all2>div{width: 150px;
    height:150px;
    position: absolute;
    left: calc(50% - 150px/2);
    bottom:calc(50% - 150px/2);}